<script setup name="treeChildren">
import treeParent from './tree-parents.vue'
import {defineEmits, defineProps} from "vue";
const props = defineProps({
  treeData: {
    type: Object,
    default: () => {
      return []
    }
  },
})
const emit = defineEmits(['getId'])
const getIdFun = (obj) => {
  emit('getId', obj)
}

const mergeFun = (id) => {
  emit('getId', {
    fun: 'merge',
    id: id,
  })
}

const delOneFUn = (id) => {
  emit('getId', {
    fun: 'del',
    id: id,
  })
}

const addChildFun = (id) => {
  emit('getId', {
    fun: 'addChild',
    id: id,
  })
}

const addBrotherFun = (id) => {
  emit('getId', {
    fun: 'addBrother',
    id: id,
  })
}

</script>

<template>
  <div class="children_node">
    <div class="children_node_line_body">
      <div class="children_node_line"></div>
    </div>
    <div class="children_node_view">
      <div class="children_node_view_body" v-for="(data, index) in props.treeData" :key="index">
        <div class="notSeeLine_left" v-if="index === 0"></div>
        <div class="notSeeLine_right" v-if="index === props.treeData.length - 1"></div>
        <div class="top_line_body">
          <div class="top_line"></div>
        </div>
        <template v-if="data.child.length === 0">
          <el-popover
              placement="bottom"
              :width="200"
              trigger="click"
          >
            <template #reference>
              <div class="tree_node">{{ data.label }}</div>
            </template>
            <div class="navList">
              <div class="oneNav" @click="delOneFUn(data.id)">撤销部门/工作组</div>
              <div class="oneNav" @click="addChildFun(data.id)">添加下级部门/工作组</div>
<!--              <div class="oneNav" @click="addBrotherFun(data.id)">添加同级节点</div>-->
              <div class="oneNav" @click="mergeFun(data.id)">合并部门/工作组</div>
            </div>
          </el-popover>

        </template>
        <template v-else>
          <treeParent :treeData="data" @getId="getIdFun"></treeParent>
        </template>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tree_node {
  width: max-content;
  height: auto;
  font-size: 16px;
  box-sizing: border-box;
  padding: 10px 20px;
  cursor: pointer;
  border: 1px solid #939090;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.children_node {
  min-width: 100%;
  width: max-content;
  height: auto;
  position: relative;
  top: -12px;

  .children_node_line_body {
    width: 100%;
    height: 1px;
    position: relative;

    .children_node_line {
      width: 100%;
      height: 1px;
      background-color: #939090;
    }
  }

  .children_node_view {
    min-width: 100%;
    width: max-content;
    height: auto;
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-between;
    gap: 50px;

    .children_node_view_body {
      width: max-content;
      position: relative;
      height: auto;

      .notSeeLine_left {
        width: 50%;
        height: 1px;
        position: absolute;
        top: -1px;
        left: 0;
        background-color: #ffffff;
      }

      .notSeeLine_right {
        width: 50%;
        height: 1px;
        position: absolute;
        top: -1px;
        right: 0;
        background-color: #ffffff;
      }

      .top_line_body {
        width: 100%;
        height: auto;
        display: flex;
        display: -webkit-flex;
        display: -moz-flex;
        align-items: center;
        justify-content: center;

        .top_line {
          width: 1px;
          flex-basis: 1px;
          flex-shrink: 0;
          height: 30px;
          background-color: #939090;
        }
      }
    }
  }
}

.navList {
  width: 100%;
  height: auto;

  .oneNav {
    width: 100%;
    height: 40px;
    cursor: pointer;
    box-sizing: border-box;
    padding-left: 10px;
    line-height: 40px;
    border-bottom: 1px solid #eeeeee;
    background-color: #ffffff;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;

    &:last-child {
      border-bottom: none;
    }

    &:hover {
      background-color: #eeeeee;
    }
  }
}
</style>